<template>
    <div
    class="page-loadmore"
    id="loadmore"
    :style="{ 'height':wrapperHeight,'-webkit-overflow-scrolling': scrollMode }">
        <div class="loadimg-news" v-show="list.length==0">
            <img src="http://47.75.99.213/app/cdn/loading.gif" alt="">
        </div>
        <mt-loadmore
            :top-method="loadTop"
            @top-status-change="handleTopChange"
            :bottom-method="loadBottom"
            @bottom-status-change="handleBottomChange"
            :bottom-all-loaded="allLoaded"
            :auto-fill = 'false'
            v-show="wrapperHeight"
            ref="loadmore">
            <div class="refresh" v-show="loadTips" :class="{'done':loadTips}">{{ loadTips }}</div>
            <div class="page-loadmore-list" v-show="list.length>0">
                <div v-for="(item,index) in list" class="listitem" :key="index" @click="changeToOrderNewsDetail(item.newId)">
                    <newsItem :item="item" :class="{'textColor':readStaList.includes(item.newId)}"></newsItem>
                </div>
            </div>
            <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus !== 'loading'"><span :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>下拉刷新</span>
                <span v-show="topStatus === 'loading'">
                    <mt-spinner type="snake"></mt-spinner> 努力加载中
                </span>
            </div>
            <div slot="bottom" class="mint-loadmore-bottom">
                <span v-show="bottomStatus !== 'loading'"><span :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>上拉加载</span>
                <span v-show="bottomStatus === 'loading'">
                    <mt-spinner type="snake"></mt-spinner> 努力加载中
                </span>
                <span v-show="allLoaded">没有更多数据了</span>
            </div>
        </mt-loadmore>
    </div>
</template>

<script>
import newsItem from "@/components/NewsItem/index"
import { Toast } from 'mint-ui';
import { getNewsList } from '@/api/api'
import { getCookie, removeCookie } from '@/utils/auth'
export default {
    name:'loadmore',
    data() {
        return {
            newId:'',
            refreshNumber:-1,
            list:[],
            wrapperHeight: '',
            allLoaded: false,
            topStatus: "",
            bottomStatus: "",

            pageSize:20,
            currentPage:0,

            readStaList:[],
            scrollMode:"auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动

            loadTips : ''
        };
    },
    components:{
        newsItem
    },
    mounted(){
        this.loadTop();
        // banner高度
        setTimeout(()=>{
            const imgHeight = document.body.clientWidth * 360 / 750;
            this.wrapperHeight = document.body.clientHeight - Math.ceil(imgHeight) - 9 - 50 + 'px';
        },500)
    },
    activated(){
        // banner高度
        setTimeout(()=>{
            const imgHeight = document.body.clientWidth * 360 / 750;
            this.wrapperHeight = document.body.clientHeight - Math.ceil(imgHeight) - 9 - 50 + 'px';
        },500)

        if( getCookie('relogin') ){
            // 该home页面是重新登录而来的
            this.loadTop();
        }
    },
    methods: {
        getList(type){
            if( this.list.length >0 ){
                this.newId = this.list[0].newId
            }
            setTimeout(() => {
                getNewsList({
                    newId: this.newId,
                    pageSize:this.pageSize,
                    currentPages:this.currentPage,
                    classId:this.$route.query.classId || '1',
                }).then(res => {
                    if( res.code == 200 ){
                        if( type == 'top' ){
                            this.list = [];
                            this.refreshNumber = res.data.refreshNumber;
                            this.$refs.loadmore.onTopLoaded();
                            this.list = this.list.concat(res.data.dataList);

                            this.$nextTick(() => {
                                if( this.refreshNumber == 0 ){
                                    this.loadTips = '已经是最新的'
                                }
                                if( this.refreshNumber >= 1 ){
                                    this.loadTips = `已为您更新${this.refreshNumber}条新闻`
                                }
                            });
                        }else{
                            if( res.data.lastPage ){
                                this.allLoaded = true;
                            }else{
                                this.currentPage = res.data.currentPages;
                                this.list = this.list.concat(res.data.dataList);
                            }
                            this.$refs.loadmore.onBottomLoaded();
                        }
                        this.$nextTick(function () {
                            // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，
                            // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，
                            // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好
                            this.scrollMode = "touch";
                        });
                    }else{
                        Toast({
                            message: res.resMsg
                        });
                    }
                })
            }, 1000);
        },
        loadTop(type) {
            //下拉刷新执行的方法
            this.loadTips = '';
            this.currentPage = 1;
            this.getList('top');
            if( type == 'empty' ){
                this.list = [];
            }
        },
        handleTopChange(status) {
            //组件顶部状态发生变化时的回调函数
            this.topStatus = status;
        },
        loadBottom() {
            //上拉刷新执行的方法
            if(this.allLoaded){
                this.$refs.loadmore.onBottomLoaded();
            }else{
                this.currentPage++;
                this.getList('bottom');
            }
        },
        handleBottomChange(status) {
            // 组件底部状态发生变化时的回调函数
            this.bottomStatus = status;
        },
        changeToOrderNewsDetail(newId){
            this.$store.dispatch("setReadlistState", newId);
            this.readStaList = this.$store.getters.readlist;
            this.$router.push({
                path:'/order/orderNewsDetail',
                query:{ newId:newId }
            })
        }
    },
    watch:{
      '$route'(to, from){
        if( to.name == 'home' ){
            // 从其它页到主页
            this.loadTips = '';
            this.newId = '';
            this.refreshNumber = -1;
        }
        if( from.name == 'home' ){
            // 从主页离开时 清除掉
            removeCookie('relogin');
        }
      }
    }
};
</script>

<style lang="stylus" scoped>
.page-loadmore{
    overflow: scroll;
    height:auto;
    position:relative;
    &.paddingTop{
        padding-top:45px;
    }
    &.paddingBottom{
        padding-bottom:55px;
    }
    .refresh{
        text-align:center;
        position: absolute;
        top: 0;
        z-index: 999;
        width: 100%;
        background: #d9ebf8;
        color:#2a90d7;
        height:30px;
        line-height:30px;
        font-size:12px;
        opacity:0;
        filter:Alpha(opacity=0);
        &.done{
            animation:fadeout 2s linear 500ms;
        }
    }
    .loadimg-news{
        img{
            width:70px;
            height:auto;
            margin: 0 auto;
            margin-top:150px;
        }
    }
    .page-loadmore-list{
        .listitem{
            position: relative;
            padding: 15px 15px 10px;
            border-bottom:5px solid rgba(242,243,249,1);
            &:first-child {
                border-top: 1px solid #eee;
            }
        }
    }
    .mint-loadmore-top{
        span{
            color:#bfbfbf;
            display: inline-block;
            vertical-align: middle;
            transition:all 500ms;
            &.is-rotate{
                transform:rotate(180deg)
            }
        }
    }
    .mint-loadmore-bottom{
        span{
            color:#bfbfbf;
            display: inline-block;
            transition:all 500ms;
            &.is-rotate{
                transform:rotate(180deg)
            }
        }
    }
}

@keyframes fadeout{
    0%{
        opacity:1;
        filter:Alpha(opacity=100);
    }
    50% {
        opacity:0.8;
        filter:Alpha(opacity=80);
    }
    100% {
        opacity:0;
        filter:Alpha(opacity=0);
    }
}
</style>
